<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <script src = "js/jquery.min.js"></script>
    <script src="js/idangerous.swiper.js"></script>
    <script src = "js/idangerous.swiper.3dflow.js"></script>
    <script src = "js/video.min.js"></script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #main{
    	position:relative;
    }
    #main .left{
    	position:relative;
    	top:150px;
    	left:300px;
    }
    #main .right{
    	position:relative;
    	top:150px;
    	left:950px;
    }
    .swiper-container {
    	margin-top:100px;
        width: 600px;
        height: 300px;
    }
    
    .swiper-slide {
    	width:200px;
        line-height: 300px;
        font-size: 36px;
        text-align: center;
    }
    .swiper-slide img{
    	width:100%;
    	height:100%;
    	cursor:pointer;
    }
    .video-list video{
    	display:block;
    }
    </style>
</head>

<body>
    <div id = "main">
    	<a class = "left" href="javascript:;">prev</a>
    	<a class = "right" href="javascript:;">next</a>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                	<img src="img/1.png" alt="">
					<video src="movie/lanlianhua3.mp4" controls="controls"></video>
                </div>
                <div class="swiper-slide"><img src="img/2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/3.jpg" alt=""></div>
            </div>
        </div>
        <div class="video-list">
        	<video id = "my-player" src="movie/lanlianhua3.mp4" width = "200px;" height = "300px;" controls="controls"></video>
        </div>
        <div id="video">蓝莲花
			<!-- <video src="movie/lanlianhua3.mp4" controls="controls">您的浏览器不支持video标签</video> -->
        </div>
    </div>
    <script>
    var mySwiper = new Swiper('.swiper-container', {
    	slidesPerView: 3,
        autoply: 5000,
        loop: true,
        tdFlow: {
        	rotate: 0,
        	stretch: 20,
        	depth: 100,
        	modifier: 2,
        	shadows: true
        }
    })
    $('.left').click(function(){
    	mySwiper.swipePrev();
    })
    $('.right').click(function(){
    	mySwiper.swipeNext();
    })
    var myPlayer = videojs('my-player');
    </script>
</body>

</html>
